import { InlineFilter } from '@/components/InlineFilter';
import { ForgotPasswordCallout } from '@/components/MigrationChanges/ForgotPasswordCallout';
import { ResponsiveTable, ResponsiveTableCell } from '@/components/ResponsiveTable';
import { TableCell, TableBody, TableHead, TableRow, Alert } from '@aws-amplify/ui-react';
import AngularOverrideExample from './override-function-calls/example.angular.mdx';
import ReactOverrideExample from './override-function-calls/example.react.mdx';
import VueOverrideExample from './override-function-calls/example.vue.mdx';
import SvelteOverrideExample from './override-function-calls/example.svelte.mdx';
import { FunctionOverridesTable } from '@/components/FunctionOverridesTable';

## Override Function Calls

You can override the call to `signUp`, `signIn`, `confirmSignIn`, `confirmSignUp`, `resendSignUpCode`, `forgotPassword` and `forgotPasswordSubmit` functions.
To override a call you must create a new `services` object with an `async` `handle*` function that returns an `aws-amplify` `Auth` promise.
<ForgotPasswordCallout />
The service object must then be passed into the `authenticator` component as a `services` prop. For example, let's imagine you'd like to lowercase the `username` and the `email` attributes during `signUp`.
This would be overriden like so:

<InlineFilter filters={['angular']}>
  <AngularOverrideExample />
</InlineFilter>

<InlineFilter filters={['react']}>
  <ReactOverrideExample />
</InlineFilter>

<InlineFilter filters={['vue']}>
  <VueOverrideExample />
</InlineFilter>
<InlineFilter filters={['svelte']}>
  <SvelteOverrideExample />
</InlineFilter>

Each `handle*` function accepts as input the expected input of its corresponding `Auth` function, allowing you to override the `Auth` function call from within the `handle*` function. Here is a table of each override function name, and the values passed as `input`.

<FunctionOverridesTable />
